<template>
  <div class="my-title" :style="{ marginBottom: bottom }">
    <div class="title">{{ title }}</div>
    <div class="more" v-if="showMore" @click="toPgae">
      查看更多
      <span> > </span>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    bottom: {
      type: String,
      default: "20px",
    },
    title: {
      type: String,
      default: "一级标题",
    },
    showMore: {
      type: Boolean,
      default: false,
    },
    src: {
      type: String,
    },
  },
  data() {
    return {};
  },
  async mounted() {},
  methods: {
    toPgae() {
      if (this.src) {
        this.$router.push({
          name: this.src,
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.my-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #eee;
  padding-bottom: 6px;
  .title {
    position: relative;
    font-size: 20px;
    color: #333;
    font-weight: bold;
    &::before {
      content: "";
      position: absolute;
      bottom: -7.5px;
      left: 0;
      background-color: #c81425;
      height: 2px;
      width: 100%;
    }
  }
  .more {
    .pointer;
    font-size: 14px;
    font-weight: 400;
    color: #c81425;
  }
}
</style>
